import React, { useEffect, useState } from 'react';
import './index.scss'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import { DatePicker, ConfigProvider } from 'antd'
import locale from 'antd/es/locale/zh_CN';

const Home = () => {
    let [currenIndex, setCurrenIndex] = useState(1)
    const { RangePicker } = DatePicker;
    useEffect(() => {
        drawEcharts('top1', {
            grid: { // 网格配置
                left: 0, // 左侧空白区域的宽度
                right: 30, // 右侧空白区域的宽度
                bottom: 0, // 底部空白区域的高度
                top: 0 // 顶部空白区域的高度
            },
            xAxis: {
                data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'Z'],
                show: false
            },
            yAxis: {
                show: false
            },
            series: [
                {
                    data: [1, 9, 4, 6, 16, 3, 5, 9, 2, 12, 7, 4, 2],
                    type: 'line',
                    showSymbol: false,
                    areaStyle: {},
                    smooth: true
                }
            ]
        });
        drawEcharts('top2', {
            grid: { // 网格配置
                left: 0, // 左侧空白区域的宽度
                right: 30, // 右侧空白区域的宽度
                bottom: 0, // 底部空白区域的高度
                top: 0 // 顶部空白区域的高度
            },
            xAxis: {
                data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L'],
                show: false
            },
            yAxis: {
                show: false
            },
            series: [
                {
                    data: [1, 9, 4, 6, 16, 3, 5, 9, 2, 12, 7, 4],
                    type: 'bar',
                    showSymbol: false,
                    areaStyle: {},
                    smooth: true
                }
            ]
        });
        drawEcharts('top3', {
            grid: { // 网格配置
                left: 0, // 左侧空白区域的宽度
                right: 60, // 右侧空白区域的宽度
                bottom: 0, // 底部空白区域的高度
                top: 0 // 顶部空白区域的高度
            },
            xAxis: {

                type: 'value',
                data: ['A'],
                show: false
            },
            yAxis: {
                type: 'category',
                show: false
            },
            series: [
                {
                    data: [6,],
                    type: 'bar',
                    barWidth: '30%',
                    showSymbol: false,
                    areaStyle: {},
                    smooth: true
                }
            ]
        });
        drawEcharts('mid1', {
            title: {
                text: '本年销量趋势',
                left: 'start'
            },
            grid: { // 网格配置
                left: 40,
                right: 200, // 右侧空白区域的宽度

            },
            tooltip: {},
            xAxis: {
                data: ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],

            },
            yAxis: {

            },
            series: [
                {
                    data: [4, 9, 4, 6, 16, 3, 5, 9, 2, 12, 7, 4, 2],
                    type: 'bar',
                    barWidth: '50%',
                    showSymbol: false,
                    areaStyle: {},
                    smooth: true,
                    itemStyle: {
                        color: function (params: any) {
                            var colors = ['#f4f213', '#0000ff', '#f4f213', '#f4f213', '#00FF00', '#FF0000', '#f4f213', '#0000ff', '#FF0000', '#00FF00'];  // 自定义颜色数组
                            return colors[params.dataIndex % colors.length];
                        }
                    }
                }
            ]
        });

    }, [])
    var drawEcharts = (id: any, options: any) => {
        var myChart1 = echarts.init(document.getElementById(id) || document.body);
        myChart1.setOption(options);
    }
    var handleActive = (i: any) => {
        console.log(i);

        setCurrenIndex(i)
    }
    return (
        <div className='home'>
            <div className='top'>
                <div className='box1'>
                    <p>总销售额</p>
                    <p>256,120</p>
                    <p className='rhb' id='top0'>
                        周总比 <i className='green'><CaretUpOutlined /></i>
                        12%&emsp;日环比<i className='red'><CaretDownOutlined /></i>11%
                    </p>
                    <p>日均销售额&emsp;¥13,563</p>
                </div>
                <div>
                    <p>访问量</p>
                    <p>5,123</p>
                    <div id='top1'>

                    </div>
                    <p>日访问量&emsp;15,678</p>
                </div>
                <div>
                    <p>支付笔数</p>
                    <p>1,456</p>
                    <div id='top2'>

                    </div>
                    <p>转换率&emsp;30%</p>
                </div>
                <div>

                    <p>识别成功率</p>
                    <p>98%</p>
                    <div id='top3'>

                    </div>
                    <p className='rhb'> 周总比 <i className='green'><CaretUpOutlined /></i>
                        11%&emsp;日环比<i className='red'><CaretDownOutlined /></i>14%
                    </p>
                </div>
            </div>
            <div className='mid'>
                <div className='midheader'>
                    <div className='title'>
                        <span onClick={() => { handleActive(1) }} className={currenIndex == 1 ? 'active' : ''}>销售量</span>
                        <span>访问量</span>
                    </div>
                    <div>
                        <span>今日&emsp;本周&emsp;本月&emsp;全年</span>
                        <span>    <ConfigProvider locale={locale}><RangePicker format="YYYY-MM-DD" /> </ConfigProvider></span>
                    </div>
                </div>
                <div className='midcontent'>
                    {currenIndex == 1 && <div id='mid1'>
                    </div>}
                    <div className='text'>
                        <h3>企业销售额排名</h3>
                        <ul>
                            <li><span className='round'>1</span>深圳老凤祥龙华店&emsp;&emsp;&emsp;<span>323</span></li>
                            <li><span className='round'>2</span>深圳盛峰黄金水坝店&emsp;&emsp;<span>323</span></li>
                            <li><span className='round'>3</span>深圳中国黄金坂田点&emsp;&emsp;<span>314</span></li>
                            <li>&nbsp;<span>4</span>&nbsp;深圳中国黄金南山店&emsp;&emsp;<span>293</span></li>
                            <li>&nbsp;<span>5</span>&nbsp;深圳中国黄金布吉店&emsp;&emsp;<span>291</span></li>
                            <li>&nbsp;<span>6</span>&nbsp;深圳六福珠宝坂田点&emsp;&emsp;<span>286</span></li>
                            <li>&nbsp;<span>7</span>&nbsp;深圳周六福南山店&emsp;&emsp;&emsp;<span>276</span></li>

                        </ul>
                    </div>
                </div>
            </div>
            <div className='bottom'></div>
        </div>
    );
};

export default Home;